﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script src="js/extend/FileSaver/FileSaver.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();


            document.getElementById('export-png').addEventListener('click', function () {
                map.once('postcompose', function (event) {
                    var canvas = event.context.canvas;
                    console.log(canvas);
                    canvas.toBlob(function (blob) {
                        saveAs(blob, 'map.png');
                    });
                });
                map.renderSync();
            });
        }
    </script>
</head>
<body>
    <div class="ToolLib">
        <input type="button" class="ButtonLib" id="export-png" value="下载 PNG" />
    </div>

    <div id="map">
    </div>
</body>
</html>
